<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>摄像头拍照</title>
    <script src="mediaDevices.js"></script>

</head>
<body>
  <video id="video" width="400" controls></video>
  <video id="video2" width="400" controls>
  </video>
  <img src="" id="img">
  <div>
    <button id="capture">拍照</button>
  </div>
  <div style="display:none"><canvas id="canvas" ></canvas></div>
  
  <script>
  
  
//    //访问用户媒体设备的兼容方法
//    function getUserMedia(constraints, success, error) {
//	if (!( navigator.mediaDevices && navigator.mediaDevices.getUserMedia || navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia))	
//		{
//			return Promise.reject('不支持访问用户媒体');
//		}
//		
//      if (navigator.mediaDevices.getUserMedia) {
//		  console.log(1)
//        //最新的标准API
//          return navigator.mediaDevices.getUserMedia(constraints);//.then(success).catch(error);
//		
//		// console.log(a)
//      } else if (navigator.webkitGetUserMedia) {
//		  console.log(2)
//
//        //webkit核心浏览器
//        navigator.webkitGetUserMedia(constraints,success, error)
//      } else if (navigator.mozGetUserMedia) {
//		  console.log(3)
//        //firfox浏览器
//        navigator.mozGetUserMedia(constraints, success, error);
//      } else if (navigator.getUserMedia) {
//		  console.log(4)
//        //旧版API
//        navigator.getUserMedia(constraints, success, error);
//      }
//    }

    var video = document.getElementById('video');
    var video2 = document.getElementById('video2');
    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');

    function success(stream) {
      //兼容webkit核心浏览器
      var CompatibleURL = window.URL || window.webkitURL;
      //将视频流设置为video元素的源
      console.log(stream);

      //video.src = CompatibleURL.createObjectURL(stream);
      video.srcObject = stream;
      video.play();
    }

    function error(error) {
      console.log("访问用户媒体设备失败");//
      console.log(error);//
    }

    //getUserMedia({video : {width:400}}).then(success).catch(error);//, success, error

    document.getElementById('capture').addEventListener('click', function () {
		var videow = document.getElementById('video').clientWidth;
		var videoh = document.getElementById('video').clientHeight; 
		canvas.setAttribute("width",videow)
		canvas.setAttribute("height",videoh)
     context.drawImage(document.getElementById('video'), 0, 0,  videow,  videoh);   
	 //console.log(canvas.toDataURL('image/jpeg',1));  
	 document.getElementById('img').src=canvas.toDataURL('image/jpeg',1)
	 
    })
	
	

	
	var m=new mediaDevices({
		constraints:{video : {width:400}},
		successfun:function(stream){
			console.log("成功1");//
				video.srcObject = stream;
                video.play();
				
				video2.srcObject = stream;
                video2.play();
			},
		errorfun:function(error){
			console.log(error);//
			}
		})
		

		
  </script>
</body>
</html>
